<template>
  <view class="task-container">
    <scroll-view ref="scrollViewRef" class="task-list" scroll-y :scroll-top="scrollTop">
      <up-button type="primary" text="确定"></up-button>
      <up-button type="primary" :plain="true" text="镂空"></up-button>
      <up-button type="primary" :plain="true" :hairline="true" text="细边"></up-button>
      <text class="debug-info">当前任务数：{{ todoList.length }}</text>
      <view v-for="(task, index) in todoList" :key="index" class="task-item">
        <text :class="{ 'completed': task.completed }" @click="store.commit('TOGGLE_TODO', index)">
          {{ task.completed ? '✓' : '○' }} {{ task.text }}
        </text>
      </view>
    </scroll-view>
    
    <view class="input-bar">
      <input 
        v-model="newTask"
        placeholder="输入新任务"
        @confirm="addTask"
        class="task-input"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onUpdated, nextTick, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const newTask = ref('');
const scrollViewRef = ref(null);
const scrollTop = ref(0);
const todoList = ref([])

onMounted(() => {
  todoList.value = store.state.todos;
});

onUpdated(() => {
  if (store.state.todos.length > 0) {
    nextTick(() => {
      if (scrollViewRef.value) {
        scrollTop.value = scrollViewRef.value.$el.scrollHeight;
      }
    });
  }
});

const addTask = () => {
  if (newTask.value.trim()) {
    store.commit('ADD_TODO', { 
      text: newTask.value.trim(),
      completed: false 
    });
    newTask.value = '';
  }
};
</script>

<style>
.task-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.task-list {
  flex: 1;
  height: 100%;
  padding: 20rpx;
  overflow-y: auto;
}

.input-bar {
  position: static;
  padding: 20rpx;
  background: #fff;
  border-top: 2rpx solid #f5f5f5;
}

.task-item {
  padding: 30rpx;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  transition: all 0.3s;
}

.completed {
  color: #a0aec0;
  text-decoration: line-through;
}

.task-item:active {
  transform: scale(0.98);
}



.task-input {
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #4a90e2;
  border-radius: 40rpx;
}
</style>